<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bgColor{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="app">
        <label for="">添加到任务雷暴: </label>
        <input type="text" v-model="newItem"><input type="button" value="添加" @click="addToList()">
        <ul>
            <li v-for="(item, index) of  lists" >
                <span v-if="(index+1) % 2 === 0" :class="classObject">
                    {{ index + 1 }} - {{ item.todoItem }}
                </span>
                <span v-else>
                    {{ index + 1 }} - {{ item.todoItem }}
                </span>
            </li>
        </ul>
        <input type="text" v-model="newText">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data(){
                return {
                    newItem: '',
                    newText: '',
                    classObject:{
                        bgColor: true
                    },
                    lists:[
                        {
                            id: 1,
                            todoItem: '刷牙'
                        }
                        ,
                        {
                            id: 2,
                            todoItem: '洗脸'
                        }
                        ,
                        {
                            id: 3,
                            todoItem: '肚子疼'
                        }
                        ,
                        {
                            id: 4,
                            todoItem: '我圆润了许多'
                        }
                    ],
                }
            },
            methods:{
                addToList: function(){
                    // 创建添加对象
                    let obj = {
                        id: this.lists.length + 1,
                        todoItem: this.newItem
                    }

                    // 对添加的文本框进行检查
                    if(this.newItem != ''){
                        this.lists.push(obj)
                        this.newText = 'add is ok.'
                    } else {
                        this.newText = '添加失败'
                    }

                    console.log(this.newItem);
                },

            },
            computed:{
                eachItem:function(){
                    if(this.lists.id % 2 === 0){
                        this.classObject.bgColor = true
                    } 
                }
            }
        })
    </script>
</body>
</html>